<!DOCTYPE html>
<html>
  <head>
    <title>Page with many links</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <style type="text/css" media="screen">
      body {
        background-color: black;
        color: #eee;
      }
      a {
        background-color: #666;
        color: #eee;
      }

      a:hover {
        background-color: #123456;
      }

      a#paddingLink {
        padding: 30px;
      }

      a#paddingLinkTop {
        padding-top: 50px;
      }
      #div-a {
        border: 1px solid #333;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <a href="#multilineLink" id="multilineLink">This will be a link spanning two<br> lines</a>

    <br>
    <br>
    <br>
    <br>

    <a href="#paddingLink" id="paddingLink">This link has a lot of vertical padding</a>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <a href="#paddingLinkTop" id="paddingLinkTop"
    >This link has a lot of vertical padding on the top</a>

    <br>
    <br>
    <div id="div-a" onclick="alert('hi')">div with an onclick attribute</div>

    <br>
    <br>

    <a name="anchorSpot">An anchor with just a name</a>

    <br>
    <br>
    <a href="https://www.google.com">Next</a> and <a href="https://www.ninjawords.com">previous</a>
    links.

    <br>
    <br>

    Below is an image map:<br>
    <img src="./image_map.png" usemap="#the-image-map">

    <map name="the-image-map">
      <area shape="rect" coords="0,0,100,50" alt="Section A" href="#section-A">
      <area shape="rect" coords="200,0,300,50" alt="Section B" href="http://google.com">
    </map>
  </body>
</html>
